Event Bubbling

定義

Event bubbling跟操作DOM元素的事件有關，是指當子元素(child)和父元素(parent)在監聽相同類型的事件(event)時，事件的執行會往該元素的父層傳遞。

描述依然很抽象，所以要繼續看例子：

示例

codepen範例程式碼

// HTML
<div class="parent">
  <div class="child"></div>
</div>

// javaScript
const parent = document.querySelector(".parent");
const child = document.querySelector(".child");

parent.addEventListener("click", () => {
  console.log(`parent event`);
});

child.addEventListener("click", () => {
  console.log("child event");
});

範例的結構，是由一個父元素的<div>包裹一個子元素<div>。
而父元素和子元素都加上"click event"的監聽器。

在點擊父元素的區塊時，console會輸出"parent event"。

// output:
"child event"

然而，在點擊子元素的區塊時，console會依序輸出"parent event"。

// output:
"child event"
"parent event"

也就是說，如果子元素和父元素被綁上了一樣的監聽事件("click")，

瀏覽器在執行完子元素的事件後，會繼續向上執行父元素的事件。

（可以想像事件發生的順序會像泡泡一樣上浮，表示事件向上傳遞。）

如果想要避免這樣的情形，可以使用 event.stopPropagation()方法:

const parent = document.querySelector(".parent");
const child = document.querySelector(".child");

parent.addEventListener("click", () => {
  console.log(`parent event`);
});

child.addEventListener("click", (e) => {
  console.log("child event");
  e.stopPropagation();
});

範例在子元素裡加入event.stopPropagation()，這樣在點擊子元素時，就不會再繼續觸發父元素的事件，也就可以防止Event Bubbling的行為發生。

Event Delegation

delegation有委派的意思，所以直譯是指事件委派。
而Event delegation是一種利用Event bubbling的性質，去委派事件的一種方式。

但是，是誰要把事件委派給誰呢？這就是接下來要看的例子：
codepen範例程式碼

// HTML
<div class="parent">
  <div class="child child1"></div>
  <div class="child child2"></div>
  <div class="child child3"></div>
</div>

// javaScript
const parent = document.querySelector(".parent");

parent.addEventListener("click", () => {
  console.log("We did the same event!");
});

這次的結構讓外層的<div>包了三個區塊!

而在這段程式碼裡，不管點擊的是父元素或子元素的<div>，
他們都會執行一樣的結果：

// output:
"We did the same event!"

也就是說，
→假設我們今天要指派一樣的事件給很多元素，可以利用Event bubbling會傳遞事件的性質，用一個父元素將所有的元素包起來，將事件委派給父元素，就可以讓所有的child都執行相同的工作！

【如內文有誤還請不吝告知>< 謝謝閱覽至此的各位:D】

參考資料：
Introduction to events - Learn web development | MDN
[教學] 瀏覽器事件：Event Bubbling, Event Capturing 及 Event Delegation | Shubo 的程式教學筆記

-----正文結束-----